<template>
  <view class="content">
    <view class="box">
      <image class="headerimg"
        src="https://img2.baidu.com/it/u=1869953151,201394433&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" />
      <view class="Message">
        <h4 class="Name">生椰爱生活</h4>
        <view class="IDNUM">ID : 983742</view>
      </view>

      <image class="AD" src="/static/tab/banner@2x.png" />

      <view class="Mydeal">
        <h4 class="DETAIL">我的交易</h4>
        <view class="detail">在二手交易平台上赚了12983.00元</view>
      </view>

      <view class="QuickMenu">
        <view class="PUB">
          <image class="MYPUB" src="/static/tab/Slice 5@2x.png" />
          <view>我的发布 12</view>
        </view>
        <view class="PUB" @click="gopage('/pages/MyPu/MyPu')">
          <image class="MYPUB" src="/static/tab/Slice 5@2x (1).png" />
          <view class>我卖出的 32</view>
        </view>
        <view class="PUB" @click="gopage('/pages/Mypay/Mypay')">
          <image class="MYPUB" src="/static/tab/Slice 5@2x (2).png" />
          <view class>我买到的 10</view>
        </view>
        <view class="PUB">
          <image class="MYPUB" src="/static/tab/Slice 5@2x (3).png" />
          <view class>审核中 1</view>
        </view>
      </view>
      <view class="OBEJECT">
        <view class="Things">
          <view class="Text">
            <h5>推荐好物</h5>
            <view>平台推荐好物</view>
          </view>
          <image class="Goods" src="/static/tab/Slice 4@2x.png"> </image>
        </view>
        <view class="Want" @click="gopage('/pages/want/want')">
          <view class="Text">
            <h5>我的想要</h5>
            <view>想要的内容</view>
          </view>
          <image class="Goods" src="/static/tab/Slice 4@2x (1).png"> </image>
        </view>
      </view>
      <view class="MainMid">
        <view class="Mid">
          <image class="IMGMid" src="/static/tab/help@2x.png"> </image>
          <view class="TextMid">帮助与客服</view>
          <image class="Rfuhao" src="/static/tab/RTow.png"></image>
        </view>
        <view class="Mid">
          <image class="IMGMid" src="/static/tab/About@2x.png"> </image>
          <view class="TextMid" style="text-align: left">关于我们</view>
          <image class="Rfuhao" src="/static/tab/RTow.png"></image>
        </view>
        <view class="Mid" @click="gopage('/pages/InfoNotice/InfoNotice')">
          <image class="IMGMid" src="/static/tab/tongzhi.png"> </image>
          <view class="TextMid" style="text-align: left">消息通知</view>
          <image class="Rfuhao" src="/static/tab/RTow.png"></image>
        </view>
        <view class="Mid" @click="gopage('/pages/AManag/AManag')">
          <image class="IMGMid" src="/static/tab/Deraction.png"> </image>
          <view class="TextMid" style="text-align: left">地址管理</view>
          <image class="Rfuhao" src="/static/tab/RTow.png"></image>
        </view>
        <custom-tabbar :selected="selectedTab" @tab-change="onTabChange" />
      </view>
    </view>



  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar.vue'
export default {
  components: {
    CustomTabbar
  },
  data() {
    return {
      title: "Hello",
      count: 0
    };
  },
  onLoad() { },
  methods: {
    gopage(url) {

      uni.navigateTo({
        url: url
      })
    },
    AddrMana() {
      uni.navigateTo({
        url: '/pages/AManag/AManag'
      })
    },
    Mypay() {
      uni.navigateTo({
        url: '/pages/Mypay/Mypay'
      })
    },
  },
};
</script>

<style scoped>
.OBEJECT {
  overflow: hidden;
}

.MainMid {
  margin: 0 auto;
  box-sizing: border-box;
}

.Mid .Rfuhao {
  width: 20upx;
  height: 20upx;
  float: right;

  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  /* float: right; */
}

.Mid .IMGMid {
  width: 40upx;
  height: 40upx;
  display: block;
  position: relative;
  float: left;
  top: 50%;
  transform: translateY(-50%);
}

.Mid .TextMid {
  padding-left: 16upx;
  color: #3b3b3b;
  font-size: 28upx;
  text-align: center;
  float: left;
}

.Mid {
  line-height: 100upx;
  height: 100upx;
  width: 100%;
}

.Text h5 {
  /* padding-top: 26upx; */
  /* padding-left: 30upx; */
  font-size: 28upx;
  line-height: 38upx;
}

.Text view {
  color: #b9babd;
  font-size: 24upx;
  padding-top: 8upx;
  text-align: right;
}

.Things .Text {
  display: inline-block;
  padding-left: 30upx;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.Want .Text {
  display: inline-block;
  padding-left: 30upx;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.Things {
  width: 320upx;
  padding-left: 10upx;
  box-sizing: border-box;
  height: 128upx;
  border-radius: 6upx 6upx 6upx 6upx;
  display: inline-block;
  margin-top: 48upx;
  background: #f9f9f9;
  float: left;
  position: relative;
  top: 50%;
  transform: translateY(-10%);
  padding-right: 20upx;
}

.Want {
  width: 320upx;
  padding-left: 10upx;
  box-sizing: border-box;
  height: 128upx;
  border-radius: 6upx 6upx 6upx 6upx;
  display: inline-block;
  margin-top: 48upx;
  background: #f9f9f9;
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-10%);
  padding-right: 20upx;
}

.Want .Goods {
  width: 100upx;
  height: 100upx;
  padding-left: 4upx;
  padding-right: 4upx;
  padding-bottom: 6upx;
  padding-top: 2upx;
  margin-left: 2upx;
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.Things .Goods {
  width: 100upx;
  height: 100upx;
  padding-left: 4upx;
  padding-right: 4upx;
  padding-bottom: 6upx;
  padding-top: 2upx;
  margin-left: 2upx;
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.OBJECT {
  padding-top: 48upx;
  display: flex;
}

.PUB view {
  text-align: center;
  margin-top: 16upx;
  font-size: 22upx;
}

.QuickMenu {
  padding-top: 44upx;
  display: flex;
  justify-content: center;
  justify-items: center;
}

.QuickMenu .MYSELL {
  width: 48upx;
  height: 48upx;
}

.QuickMenu .PUB {
  flex: 25%;
  float: left;
}

.QuickMenu {
  margin: 0 auto;
}

.QuickMenu .MYPUB {
  width: 48upx;
  height: 48upx;
  margin: 0 auto;
  display: block;
}

.PUB {
  flex: 1;
}

.Mydeal {
  margin-top: 60upx;
}

.DETAIL {
  display: inline;
  font-size: 36upx;
  padding-top: 60upx;
}

.detail {
  display: inline;
  font-size: 20upx;
  color: #999999;
  padding-left: 8upx;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.AD {
  width: 670upx;
  height: 168upx;
  border-radius: 0upx 0upx 0upx 0upx;
  margin-top: 48upx;
}

.Name {
  font-size: 36upx;
}

.Message {
  float: left;
  padding-left: 24upx;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.IDNUM {
  color: #a2a2a2;
  font-size: 26upx;
}

.headerimg {
  float: left;
  width: 136upx;
  height: 136upx;
  border-radius: 50%;
  box-shadow: 0upx 4upx 20upx 0upx rgba(0, 0, 0, 0.15);
}

.box {
  width: 670upx;
  height: 136upx;
  /* overflow:hidden; */
  margin-top: 12upx;

}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 500upx;
  box-sizing: border-box;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
